<template>
  <by-background />

  <view>
    <by-navigation-bar position="fixed" background="transparent" >
      <template #ending>
        <by-view @click="showMenu = true">
          <view class="flex-row">
            <view class="dot" />
            <view class="dot" />
            <view class="dot" />
          </view>
        </by-view>
      </template>
    </by-navigation-bar>

    <view class="swiper relative">
      <easy-cacheimage :image-src="detail.avatarUrl" class="width-full height-full" mode="aspectFill" @click="viewImage(0,detail.allPicUrls)"/>
<!--      <swiper class="width-full height-full" indicator-dots indicator-color="#c2c2c2" indicator-active-color="#FFDA27">
        <swiper-item>

        </swiper-item>
      </swiper>-->

      <view v-if="detail.warrantyStatus === '1'" class="tag flex-row flex-center" @click="showSafeguard = true">
        <image src="/static/assure-white.png" class="assure margin-right-10" />
        <text class="text-20 color-white">已担保</text>
      </view>
    </view>
    <view class="tips flex-row align-center justify-between">
      <view v-for="(item,index) in tipsList" :key="index" class="flex-row flex-center">
        <image src="/static/right-decorate-yellow.png" class="margin-right-10 image" />
        <text class="text-22">{{ item }}</text>
      </view>
    </view>

    <view class="padding-20">
      <view class="card padding-tb-30 padding-lr-20">
        <view class="flex-row align-center justify-between" :class="'margin-bottom-' + (detail.storefrontId ? 20 : 30)">
          <text class="text-32 color-t1 text-bold">{{ detail.nickname }}</text>
          <view class="flex-row align-center">
            <image src="/static/address1.png" class="address margin-right-10" />
            <text class="text-24 color-t2">{{ detail.distance }}</text>
          </view>
        </view>

        <view class="flex-row">
          <view v-if="detail.storefrontId && detail.storefront" class="shop margin-bottom-30" @click="jump('/pages/approve/index?type=1&id=' + detail.tno)">
            <image src="/static/shop-bg1.png" class="shop-bg" />
            <view class="shop-content flex-row align-center justify-between">
              <view class="shop-left flex-row align-center padding-left-10">
                <image src="/static/shop.png" class="shop-icon" />
                <text class="text-18">店铺</text>
              </view>

              <view class="shop-right flex-row align-center justify-end padding-right-6">
                <text class="text-18">{{ detail.storefront.storefrontNameShort }}</text>
                <text class="technician-fanhui margin-left-6" />
              </view>
            </view>
          </view>
        </view>

        <view class="flex-row align-center">
          <image src="/static/star.png" class="star" />
          <text class="text-28 color-second text-bold margin-left-10 margin-right-20">{{ detail.star }}</text>
          <text class="text-26 color-t2 margin-right-20">评价数 {{detail.commentCount}}</text>
          <text class="text-26 color-t2 margin-right-20">联系数 {{detail.contactCount}}</text>
          <text class="text-26 color-t2">预约数 {{detail.appointmentCount}}</text>
        </view>
      </view>

      <view class="card margin-top-20 padding-lr-20 padding-tb-10">
        <view v-for="(item,index) in showList" :key="index" class="flex-row align-center justify-between info-item" @click="itemClick(item.src)">
          <view class="flex-row align-center">
            <text class="text-28 color-t2 margin-right-46">{{item.label}}</text>
            <text class="text-28" :style="{color:item.color}">{{item.value}}</text>
          </view>

          <text v-if="item.showArrow" class="arrow color-t2 technician-fanhui" />
        </view>
      </view>

      <view class="card margin-top-20 padding-tb-30">
        <view class="flex-row align-center justify-between padding-lr-20">
          <text class="text-32 color-t1 text-bold">技师简介</text>
<!--          <by-view class="flex-row align-center">
            <text class="text-26 color-t2 margin-right-10 margin-top-4">查看更多</text>
            <text class="arrow color-t2 technician-fanhui"></text>
          </by-view>-->
        </view>

        <scroll-view v-if="detail.picUrls?.length" scroll-x class="margin-top-28">
          <viwe class="flex-row">
            <view class="size-box flex-auto" />
            <view class="flex-row ">
              <easy-cacheimage v-for="(item,index) in detail.picUrls" :key="item" :image-src="item" class="photos flex-auto" mode="aspectFill" @click="viewImage(index,detail.picUrls)"/>
            </view>
            <view class="size-box flex-auto" />
          </viwe>
        </scroll-view>

        <view class="margin-top-30 padding-lr-20">
          <text class="text-28 color-t1 intro">{{detail.profile}}</text>
        </view>
      </view>

      <view class="card margin-top-20 padding-lr-20 padding-tb-30">
        <view class="margin-bottom-28">
          <text class="text-32 color-t1 text-bold">提供服务</text>
        </view>

        <view v-for="(item,index) in detail.serviceSkuList" :key="index" class="margin-bottom-40 service-item">
          <service-item :item="item" :tno="detail.tno" />
        </view>
      </view>

      <view v-if="isShowContact" class="card margin-top-20 padding-lr-20 padding-tb-30">
        <view class="margin-bottom-34">
          <text class="text-32 color-t1 text-bold">联系方式</text>
        </view>
        <view class="flex-row align-center justify-between margin-bottom-34" @click="handleShowContact">
          <view class="flex-row align-center">
            <image src="/static/wechat.png" class="contact-img margin-right-30" />
            <text class="text-28 color-t1">{{ detail.wxNo }}</text>
          </view>

          <text class="arrow color-t2 technician-fanhui" />
        </view>
        <view class="flex-row align-center justify-between" @click="handleShowContact">
          <view class="flex-row align-center">
            <image src="/static/phone.png" class="contact-img margin-right-30" />
            <text class="text-28 color-t1">{{ detail.contactTel }}</text>
          </view>

          <text class="arrow color-t2 technician-fanhui" />
        </view>
      </view>

      <view class="flex-row flex-center margin-top-34 padding-bottom-320">
        <image src="/static/wave.png" class="wave" />
        <by-view @click="jump(`/pages/suggest/index?type=2&from=0&id=${detail.tno}`)">
          <text class="text-28 padding-lr-26" style="color:#B7B7B7">举报</text>
        </by-view>
        <image src="/static/wave.png" class="wave" />
      </view>
    </view>
  </view>

  <by-bottom-button v-if="isShowContact" :tno="detail.tno" width="328rpx" height="72rpx" font-size="32rpx" bold text="立即联系" @click="handleShowContact">
    <template #btn>
      <by-button width="328rpx" height="72rpx" font-size="32rpx" bold text="预约上门" background="#FB8B04" font-color="#FFFFFF" @click="jump('/pages/subscribe/index?tno=' + detail.tno)"/>
    </template>
  </by-bottom-button>

  <by-page-dialogs
    v-model:show-touch="showTouch"
    v-model:show-contact-way="showContactWay"
    v-model:show-error="showError"
    v-model:show-safeguard="showSafeguard"
    :point="point"
    :tno="detail.tno"
    @showContact="showContactWay = true"
  />

  <draw-bottom v-model="showDraw" />

  <by-draw-bottom v-model="showMenu" :list="menuList" @click="jump(`/pages/suggest/index?type=2&from=0&id=${detail.tno}`)" />
</template>

<script setup lang="ts">
import useUserStore from '@/store/user'
import DrawBottom from '@/pages/index/draw-bottom.vue'
import ServiceItem from './service-item.vue'
import { jump, viewImage, loading, copyData, toast } from '@/common/util'
import { getTechnicianDetail, isUnlockContact } from '@/common/api'
import type { AnyObject } from '@/common/types'

const menuList = [
  { text: '举报' }
]

const tipsList = ['安心服务', '手机认证', '实名认证', '健康档案']

const infosList = reactive([
  { label: '服务', value: '可服务', color: '#FFB618', showArrow: false, show: true, src: '' },
  { label: '资质', value: '资格认证', color: '#2D2A26', showArrow: true, show: true, src: '/pages/approve/index' },
  { label: '担保', value: '联系保障 · 服务保障 · 担保计划服务', color: '#2D2A26', showArrow: true, show: true, src: 'showDraw' }
  // { label: '商家', value: '商家认证', color: '#2D2A26', showArrow: true, show: true, src: '/pages/approve/index' }
])
const showList = computed(() => infosList.filter(item => item.show))

const showDraw = ref(false)
const showTouch = ref(false)
const showContactWay = ref(false)
const showSafeguard = ref(false)
const showError = ref(false)
const showMenu = ref(false)
const distance = ref('')
onLoad(e => {
  distance.value = e?.distance
  getDetail(e?.id)
})

const detail = shallowRef<AnyObject>({})
const userStore = useUserStore()
async function getDetail(id:string) {
  const load = loading()
  const res = await getTechnicianDetail({
    tno: id,
    ...userStore.location
  })
  const data = Object.assign(res.data.technician, res.data.profile)
  if (data.picUrls) {
    data.allPicUrls = data.picUrls?.split(',')
    data.picUrls = copyData(data.allPicUrls)
    data.picUrls.shift()
  }
  data.serviceSkuList = res.data.serviceSkuList
  data.storefront = res.data.storefront
  detail.value = data
  infosList[1].show = data.vqStatus === '1'
  // infosList[3].show = !!data.storefrontId
  switch (data.serviceStatus) {
    case 'ONLINE':
      infosList[0].value = '可服务'
      break
    case 'OFFLINE':
      infosList[0].value = '已离线'
      break
    case 'RESTING':
      infosList[0].value = '休息中'
      break
  }
  load.hide()
}

function itemClick(src:string) {
  if (src) {
    if (src === 'showDraw') showDraw.value = true
    else jump(src + `?id=${detail.value.tno}`)
  }
}

const point = ref(0)
async function handleShowContact() {
  if (!userStore.token) {
    jump('login')
    toast('请先登录')
    return
  }
  const info = await isUnlockContact(detail.value.tno as string)
  const { data } = info
  data.canGet = data.userPoint - data.unlockPoint >= 0
  if (data.unlock) {
    showContactWay.value = true
  } else {
    point.value = data.unlockPoint
    if (data.canGet) showTouch.value = true
    else showError.value = true
  }
}

const isShowContact = ref(true)
/* #ifdef APP-PLUS*/
import useSystemStore from '@/store/system'
import { getHonorAuditConfig } from '@/common/api'
const systemStore = useSystemStore()
async function handleGetHonorAuditConfig() {
  const res = await getHonorAuditConfig()
  const { isAudit } = res.data
  if (systemStore.systemInfo.brand === 'honor' || systemStore.systemInfo.brand === 'huawei' || systemStore.systemInfo.brand === 'vivo') isShowContact.value = !isAudit
}
handleGetHonorAuditConfig()
/* #endif*/

/**
 * 返回监听 start
 * */
const back = computed(() => showTouch.value || showContactWay.value || showError.value || showDraw.value || showSafeguard.value || showMenu.value)
onBackPress(() => {
  if (back.value) {
    close()
    return true
  }
})
function close() {
  showTouch.value = showContactWay.value = showError.value = showDraw.value = showMenu.value = showSafeguard.value = false
}
onHide(close)
/**
 * 返回监听 end
 * */
</script>

<style scoped lang="scss">
@include setMargin(bottom, 46);

@include setMargin(right, 46);

@include setMargin(top, 4);

@include setMargin(top, 34);

@include setMargin(bottom, 34);

@include setPadding(lr, 26);

@include setPadding(bottom, 320);

@include setMargin(top, 28);

@include setMargin(bottom, 28);

@include setPadding(right, 6);

@include setMargin(left, 6);

.swiper{
  height: 826rpx;

  .tag{
    width: 140rpx;
    height: 47rpx;
    background: $color-bg-mask;
    border-radius: 24rpx;
    @include position(absolute, $left: 30rpx, $bottom: 40rpx);

    .assure{
      width: 16rpx;
      height: 18rpx;
    }

  }

}

.tips{
  padding: 0 60rpx;
  height: 60rpx;
  background: #F8E9CA;
  color: #B78345;

  .image{
    width: 22rpx;
    height: 22rpx;
  }

}

.card{
  border-radius: 16rpx;
  background: $color-white;

  .shop{
    position: relative;

    .shop-bg{
      width: 88rpx;
      height: 38rpx;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
    }

    .shop-content{
      width: 100%;
      height: 100%;
      position: relative;
      z-index: 2;

      .shop-left{
        width: 88rpx;
        color: #F5EAC5;
      }

      .shop-right{
        padding-left: 10rpx;
        background: #FDF1E5;
        height: 38rpx;
        color: #766443;
        border-radius: 0 4rpx 4rpx 0;

        .technician-fanhui{
          display: block;
          transform: rotate(180deg);
          font-size: 14rpx;
          margin-bottom: 2rpx;
        }

      }

      .shop-icon{
        width: 20rpx;
        height: 18rpx;
        margin-right: 6rpx;
      }

    }

  }

  .star{
    width: 22rpx;
    height: 22rpx;
    margin-bottom: 4rpx;
  }

  .info-item{
    height: 76rpx;
  }

  .arrow{
    font-size: 24rpx;
    transform: rotate(180deg);
  }

  .size-box{
    width: 20rpx;
    height: 20rpx;
  }

  .photos{
    width: 142rpx;
    height: 142rpx;
    border-radius: 10rpx;
    margin-right: 26rpx;
    overflow: hidden;

    &:last-child{
      margin: 0;
    }

  }

  .intro{
    line-height: 36rpx;
  }

  .service-item:last-child{
    margin: 0;
  }

  .contact-img{
    width: 44rpx;
    height: 44rpx;
  }

}

.wave{
  width: 66rpx;
  height: 8rpx;
}

.dot{
  width: 6rpx;
  height: 6rpx;
  border-radius: 50%;
  background: $color-t1;

  &:nth-child(2){
    margin: 0 6rpx;
  }

}

.address{
  width: 22rpx;
  height: 28rpx;
}

</style>
